<%@include file="../header.jsp" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 
<link rel="stylesheet" href="${pageContext.request.contextPath}/plugs/zoom/css/ShopShow.css" type="text/css" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/plugs/zoom/css/MagicZoom.css" type="text/css" />
<script src="${pageContext.request.contextPath}/plugs/zoom/js/MagicZoom.js" type="text/javascript"></script>
<script>
function btnSelect(contentid,typeid){
	$("."+typeid).removeClass("btn-info");
	$("#btn_"+contentid).addClass("btn-info");
}

function add(baseurl){
	var data=$('#fm_goods').serialize();
    $.post(baseurl+"/goods/addCart.action",data,function(result){

    	 if(result.success){
    		 //alert(result.cartnum);
    		 $("#cartBadge").html(result.cartnum);  		 
    		 $("#cartTitle").html("添加成功");  		 
    		 $("#cart_msg").html("已将商品加入到购物车。");  		 
    	 }else{ 		 
    		 $("#cartTitle").html("添加失败");
    		 $("#cart_msg").html("请重新选择商品。");
    	 }

    	 $("#cartModal").modal('show'); 
    	 $("#cart_msg").show();
    	 $("#cart_tab").hide();
    	 
    },"json");
}

</script>
<div class="col-dm-12">
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">所有分类</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">0-3岁<span class="sr-only">(current)</span></a></li>
        <li><a href="#">3-6岁</a></li>
       <li><a href="#">6-12岁</a></li>
       <li><a href="#">12岁以上</a></li>
       <li><a href="#">漫画管</a></li>
       <li><a href="#">卡通动漫馆</a></li>
       <li><a href="#">儿童文学馆</a></li>
       <li><a href="#">小学新课标</a></li>
       <li><a href="#">世界名著馆</a></li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="漫画 小说 绘本">
        </div>
        <button type="submit" class="btn btn-default">搜索</button>
      </form>
     
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
</div>
	<div class="row">
		<div class="col-md-4">
				
				<!-- 代码开始 -->
				<div id="tsShopContainer">
					<div id="tsImgS"><a href="${pageContext.request.contextPath}${goodsDetail.goodsPic}" title="Images" class="MagicZoom" id="MagicZoom"><img width="650px" height="650px" src="${pageContext.request.contextPath}${goodsDetail.goodsPic}" /></a></div> 
					<div id="tsPicContainer">
						<div id="tsImgSArrL" onclick="tsScrollArrLeft()"></div>
						<div id="tsImgSCon">
							<ul>
								<c:forEach items="${goodsDetail.pics }" var="s" varStatus="vs">
									<li onclick="showPic(${vs_index})" rel="MagicZoom"><img height="100" width="100" src="${pageContext.request.contextPath}${s.picUrl}" tsImgS="${pageContext.request.contextPath}${s.picUrl}" /></li>
								</c:forEach>
							</ul>
						</div>
						<div id="tsImgSArrR" onclick="tsScrollArrRight()"></div>
					</div>
					<img class="MagicZoomLoading" width="16" height="16" src="${pageContext.request.contextPath}/plugs/zoom/images/loading.gif" alt="Loading..." />
				</div>
				
				<script src="${pageContext.request.contextPath}/plugs/zoom/js/ShopShow.js"></script>
				<!-- 代码结束 -->				
				
		</div>
		<div class="col-md-8">
			<h3 style="color:red">斗罗大陆小说+漫画</h3>
			<div class="panel panel-default">
			  <div class="panel-body bg_goodsdetail">
			    <p>促销价：<span class="price_red "><small>￥</small>30</span></p>
			    <p>原价：<span class="price"><small>￥</small>92</span></p>
			    <p>已售出 <span style="color:gray">12W+ </span>件</p>
			     <p style="color:red">优惠 <span style="color:green">20元店铺优惠券，满400可用</span></p>
			     <p style="color:red">优惠<span style="color:green">10元店铺优惠券，满300可用</span></p>
			  </div>
			</div>
	    <form id="fm_goods" class="form-inline" role="form"  method="post">	
				<input type="hidden" name="goodsId" value="${goodsDetail.goodsId}"/>
			    <input type="hidden" name="goodsName" value="${goodsDetail.goodsName}"/>
			    <input type="hidden" name="goodsPrice" value="${goodsDetail.goodsPrice}"/>
			    <input type="hidden" name="goodsDiscount" value="${goodsDetail.goodsDiscount}"/>
			    <input type="hidden" name="goodsPostalfee" value="${goodsDetail.goodsPostalfee}"/>		
			    <input type="hidden" name="contentid">
			    <input type="hidden" name="typeid">
			    <input type="hidden" name="contentid">
			<c:forEach items="${goodsDetail.typelist }" var="s" varStatus="vs">
			<div class="row row_style">
			  <div class="col-md-12">
	            <label>${s.typeName}：</label>
	                <input type="hidden" name="hid_${s.typeId}" id="hid_${s.typeId}" value=""/>
		            <div class="btn-group" role="group" id="btn_group_${s.typeId}">
					<c:forEach items="${s.detail}" var="t" varStatus="tvs">
						<button type="button" class="btn btn-default btn-xs ${tvs.first?'btn-info':'' } ${s.typeId}" id="btn_${t.contentId}"  onclick="btnSelect(${t.contentId},${s.typeId})">${t.content}</button>						
					</c:forEach>
					</div>
	          </div>  
            </div>
            </c:forEach>

             <div class="row row_style">
	             <div class="col-md-12">
	            	<div class="form-group">	
					    <label for="num">数量：</label>		 								
						<div class="input-group input-group-sm col-xs-4">
						<input class="form-control" id="goodsSales" name="goodsSales" type="number" value="1" min="1"/>
						
						</div>
						库存9999
					</div>
				  </div>	
             </div>
         </form>    
		     <div class="row row_style">
		        <div class="col-md-12">

			        <p class="p_height">快递：<small>￥</small>${goodsDetail.goodsPostalfee}</p>			        
					<p>
						<button class="btn btn-primary btn-sm" type="submit">
							立即购买
						</button>
						<button class="btn btn-primary btn-sm" type="button" onclick="add('${pageContext.request.contextPath}')">
							加入购物车
						</button>
						
					</p>
				 </div>	
        
		     </div>
		</div>
		<div class="col-md-3">
		<div class="panel panel-default">
  <div class="panel panel-success">
    <h3 class="panel-title">官方自营</h3>
  </div>
  <div class="panel-body">
    <p>*金品礼盒书</p><br>
    <p>*卡通漫画馆</p><br>
    <p>*小说馆</p><br>
    <p>*儿童文学馆</p><br>
    <p>*国际获奖文学馆</p><br>
    <p>*小学新课标</p><br>
    <p>*绘本馆</p><br>
    <p>*科普百科馆</p><br>
    <p>*中小学教学馆</p><br>
    <p>*启蒙馆</p><br>
     <p>*金品礼盒书</p><br>
    <p>*卡通漫画馆</p><br>
    <p>*小说馆</p><br>
    <p>*儿童文学馆</p><br>
    <p>*国际获奖文学馆</p><br>
    <p>*小学新课标</p><br>
    <p>*绘本馆</p><br>
    <p>*科普百科馆</p><br>
    <p>*中小学教学馆</p><br>
    <p>*启蒙馆</p><br>
     <p>*金品礼盒书</p><br>
    <p>*卡通漫画馆</p><br>
    <p>*小说馆</p><br>
    <p>*儿童文学馆</p><br>
    <p>*国际获奖文学馆</p><br>
    <p>*小学新课标</p><br>
    <p>*绘本馆</p><br>
    <p>*科普百科馆</p><br>
    <p>*中小学教学馆</p><br>
    <p>*启蒙馆</p><br>
     <p>*金品礼盒书</p><br>
    <p>*卡通漫画馆</p><br>
    <p>*小说馆</p><br>
    <p>*儿童文学馆</p><br>
    <p>*国际获奖文学馆</p><br>
    <p>*小学新课标</p><br>
    <p>*绘本馆</p><br>
    <p>*科普百科馆</p><br>
    <p>*中小学教学馆</p><br>
    <p>*启蒙馆</p><br>
     <p>*金品礼盒书</p><br>
    <p>*卡通漫画馆</p><br>
    <p>*小说馆</p><br>
    <p>*儿童文学馆</p><br>
    <p>*国际获奖文学馆</p><br>
    <p>*小学新课标</p><br>
    <p>*绘本馆</p><br>
    <p>*科普百科馆</p><br>
    <p>*中小学教学馆</p><br>
    <p>*启蒙馆</p><br>
     <p>*金品礼盒书</p><br>
    <p>*卡通漫画馆</p><br>
    <p>*小说馆</p><br>
    <p>*儿童文学馆</p><br>
    <p>*国际获奖文学馆</p><br>
    <p>*小学新课标</p><br>
    <p>*绘本馆</p><br>
    <p>*科普百科馆</p><br>
    <p>*中小学教学馆</p><br>
    <p>*启蒙馆</p><br>
  </div>
</div></div>
			<div class="col-md-9">
			<div class="panel panel-danger">
  <div class="panel-heading">
    <h3 class="panel-title">商品详情</h3>
  </div>
  <div class="panel-body">
  <img
		src="${pageContext.request.contextPath}/images/p.jpg">
		<img
		src="${pageContext.request.contextPath}/images/p1.jpg">
		<img
		src="${pageContext.request.contextPath}/images/p2.jpg">
		<img
		src="${pageContext.request.contextPath}/images/p3.jpg">
		<img
		src="${pageContext.request.contextPath}/images/p4.jpg">
		<img
		src="${pageContext.request.contextPath}/images/p5.jpg">
		
  </div>
</div>	
 </div>
			</div>								
		 </div>
	</div>
	



<%@include file="../common/cartModal.jsp" %>
<%@include  file="/common/footer.jsp"%>		

